﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Поворот составного объекта</title>
<link rel="stylesheet" type="text/css" href="../lib/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../lib/raphael-min.js"></script>
<script type="text/javascript">
	$(function(){
		var paper = new Raphael($("#paper1")[0]),
			origin = {x:200, y:200},
			color = {pointHi:"#f00", point:"#e00", origin:"#f00"},
			markerLng = 10;
			
		var set = paper.set();
		set.push(paper.rect(origin.x-8, origin.y-8, 40, 40).attr({fill:"#0ff"}));
		set.push(paper.rect(origin.x+5, origin.y+5, 20, 20).attr({fill:"#ffa"}));
		
		var control = paper.circle(100, origin.y, 5).attr({fill:color.point, cursor:"pointer"})
			.drag(dragmove, dragstart, dragend);
			
		paper.path(["M", origin.x-markerLng, origin.y, "L", origin.x+markerLng, origin.y]).attr({stroke:color.origin});
		paper.path(["M", origin.x, origin.y-markerLng, "L", origin.x, origin.y+markerLng]).attr({stroke:color.origin});
			
		
		function addVect(v1, v2){
			return [v1[0]+v2[0], v1[1]+v2[1]];
		}
		
		function dragstart(x, y, e) {
			this.data("curPos", [this.attr("cx"), this.attr("cy")]);
			this.attr("fill", color.pointHi);
		}
		function dragmove(dx, dy, x, y, e) {
			var pos = addVect(this.data("curPos"), [dx, dy]);
			this.attr({cx:pos[0], cy:pos[1]});
			var ptID = this.data("pointID");
						
			var angle = Raphael.angle(origin.x, origin.y, pos[0], pos[1]);
			$("#angle").html(Math.round(angle));
			set.transform(["R", angle, origin.x, origin.y]);

		}
		function dragend(e) {
			this.data("curPos", [this.attr("cx"), this.attr("cy")]);
			this.attr("fill", color.point);
		}
		
	});
</script>
</head>
<body>
	<h1>Поворот составного объекта</h1>
	<p>Указания: для поворота фигуры следует перемещать красную точку.</p>
	<p>Особенности:</p>
	<ul>
		<li>чтобы при повороте фигура не распадалась на части, в операторе поворота следует указывать координаты центра поворота</li>
	</ul>
	<div>Текущий угол = <span id="angle">0</span>&deg;.</div>
	<div id="paper1" class="paper" style="width:600px; height:400px;">
	</div>
	

</body>
</hmtl>